/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    FlatList,
} from 'react-native';

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

var OrderCell = require('./OrderCell');

export default class Order extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            data: this._sourceData,

        };
    }

    _sourceData =[
        {name: '大护法',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '绣春刀II：修罗战场',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '神偷奶爸3',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '神奇女侠',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '摔跤吧，爸爸',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '悟空传',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '闪光少女',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '攻壳机动队',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '速度与激情8',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '蝙蝠侠大战超人',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '攻壳机动队',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '速度与激情8',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'},
        {name: '蝙蝠侠大战超人',price:'¥30',time:'11:30',start:'从二七航海路与华中路',end:'到金水区曼哈顿广场1303',number:'8092830423'}
    ]

    render() {
        return (

            <View style={styles.container}>
                <FlatList
                    data={this.state.data}


                    // 设置item 不同的key
                    keyExtractor = {this._extraUniqueKey}

                    ListHeaderComponent = {this.renderHeader()}
                    renderItem={this._renderItem}

                />

            </View>


        );
    }

    _extraUniqueKey(item ,index){
        return "index"+index+item;
    }


    // 单独的一个cell
    _renderItem = ({item, index}) => {
        return(
            <OrderCell style={styles.cellStyle}
                title = {item.name}
                 price = {item.price}
                 startAddress = {item.start}
                 endAdderss = {item.end}
                 time = {item.time}
                 number = {item.number}
            />
        )
    }



    // 头部
    renderHeader(){
        return(
        <View style={{width:375,height:50,backgroundColor:'white'}} >
            <View style={{width:375,height:10,backgroundColor:'#f5f5f5'}}>

            </View>
            <View style={{width:375, height:44,flexDirection: 'row', alignItems:'center'}}>
                <Image source={{uri:'个人中心-评价管理',width:17,height:17}} style={{marginLeft:10}}></Image>
                <Text style={{color:'orange'}}>提示:</Text>
                <Text style={{color:'#999999'}}>接单后再取消订单会导致短时间内不能接单</Text>
            </View>
        </View>

        )

    }



}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'white',
        alignItems: 'center'
    },

    cellStyle:{
        width:width,
        height:168,

    }

})


module.exports = Order;




